<template>
  <div class="draggable-table-container">
    <draggable
      v-model="tableData"
      animation="300"
      handle=".drag-handle"
      class="draggable-container"
      itemKey="id"
    >
      <template #item="{ element, index }">
        <el-table
          :data="[element]"
          border
          style="width: 100%"
          :show-header="index === 0"
        >
          <!-- 拖拽手柄列 -->
          <el-table-column label="拖拽" width="80" align="center">
            <template #default>
              <el-icon class="drag-handle" :size="18">
                <Menu />
              </el-icon>
            </template>
          </el-table-column>
          <!-- 复选框列 -->
          <el-table-column label="选择">
            <template #default="scope">
              <el-checkbox v-model="scope.row.selected" />
            </template>
          </el-table-column>
          <!-- 可编辑输入框列 -->
          <el-table-column prop="name" label="姓名">
            <template #default="scope">
              <el-input
                v-if="scope.row.isEditingName"
                v-model="scope.row.name"
                @blur="scope.row.isEditingName = false"
              />
              <span v-else @click="scope.row.isEditingName = true">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <!-- 可编辑选择框列 -->
          <el-table-column prop="city" label="城市">
            <template #default="scope">
              <el-select
                v-if="scope.row.isEditingCity"
                v-model="scope.row.city"
                @change="scope.row.isEditingCity = false"
              >
                <el-option
                  v-for="option in cityOptions"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                />
              </el-select>
              <span v-else @click="scope.row.isEditingCity = true">{{ scope.row.city }}</span>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </draggable>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElTable, ElTableColumn, ElIcon, ElInput, ElCheckbox, ElSelect, ElOption } from 'element-plus';
import { Menu } from '@element-plus/icons-vue';
import draggable from 'vuedraggable';

// 城市选项
const cityOptions = ref([
  { value: 'beijing', label: '北京市' },
  { value: 'shanghai', label: '上海市' },
  { value: 'guangzhou', label: '广州市' },
  { value: 'shenzhen', label: '深圳市' }
]);

// 表格数据，添加唯一 id 和编辑状态字段
const tableData = ref([
  {
    id: 1,
    name: '张三',
    city: 'beijing',
    selected: false,
    isEditingName: false,
    isEditingCity: false
  },
  {
    id: 2,
    name: '李四',
    city: 'shanghai',
    selected: false,
    isEditingName: false,
    isEditingCity: false
  },
  {
    id: 3,
    name: '王五',
    city: 'guangzhou',
    selected: false,
    isEditingName: false,
    isEditingCity: false
  },
  {
    id: 4,
    name: '赵六',
    city: 'shenzhen',
    selected: false,
    isEditingName: false,
    isEditingCity: false
  },
]);
</script>

<style scoped>
.draggable-table-container {
  padding: 20px;
}

.drag-handle {
  cursor: move;
  color: #666;
}

.draggable-container {
  display: block;
}

.el-table__row.dragging {
  background-color: #f0f9ff !important;
  border: 1px dashed #409eff !important;
}
</style>